<template>
  <div class="container" v-loading="status_loading">
    <el-row type="flex" class="margin-10">
      <el-col :span="20" align="left">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple-dark">
            <el-form :inline="true" :model="formInline" class="demo-form-inline form-height">
              <el-form-item :label="$t('m.quality.qctasknumber')" prop="signintasknumber">
                <el-input
                  maxlength="20"
                  show-word-limit
                  @input="formInline.sku=''"
                  v-model="formInline.signintasknumber"
                  placeholder
                ></el-input>
              </el-form-item>
              <el-form-item label="SKU" prop="sku">
                <el-input
                  maxlength="20"
                  show-word-limit
                  @input="clearNumber"
                  v-model="formInline.sku"
                  placeholder
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">{{$t('m.query')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="4" align="right">
        <div class="grid-content bg-purple form-height"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          :data="list"
          border
          empty-text
          fits
          style="width: 100%"
          tooltip-effect="dark"
        >
          >
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU" width></el-table-column>
          <el-table-column align="center" prop="signquantity" :label="$t('m.check.count')" width>
            <template slot-scope="scope">
              <el-input
                maxlength="6"
                show-word-limit
                @input="validateNumber($event,scope.$index)"
                v-model="list[scope.$index].signquantity"
                placeholder
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label width="40" align="center">
            <template slot-scope="scope">
              <span>
                <el-button @click="reduce(scope.$index)" class="delete" type="danger" circle>-</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="PreviewMytable()">{{$t('m.print')}}</el-button>
        <el-button @click="$router.back(-1)">{{$t("m.back")}}</el-button>
      </el-col>
    </el-row>
    <div class="print-block">
      <el-row :gutter="30">
        <el-col :span="6">
          <div id="div1">
            <div class="inner" v-for="(item,index) in list" :key="index">
              <div v-for="(one,i) in item.skuList" :key="i" style="margin-top:30px">
                <div
                  style="margin-left:10px;height:20px;font-weight:400;font: '微软雅黑'"
                >{{item.fullspecvlue}}</div>
                <svg :id="code+index" />
              </div>
            </div>
          </div>
          <el-button type="primary" @click="PreviewMytable()">{{$t('m.print')}}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
export default {
  name:'printSku',
  data(){
    return {
      status_loading:true,
      formInline:{
        signintasknumber:'',
        sku:''
      },
      signquantity:null,
      list:[],
      saveItem:null, //保存通过任务号获取的一条数据
      dialogFormVisible:false,
      barCode:null,
      code:'code'
    }
  },

  methods:{
    validateNumber(value,index){
      this.list[index].signquantity=value.replace(/[^\d]/g,'')
    },
    search(){
      // for (let i = 0; i < this.list.length; i++) {
      //   if (this.list[i].productspeccode == this.formInline.sku) {
      //     return this.$message({
      //       showClose: true,
      //       message: that.$t("m.notice.exist"),
      //       type: "warning",
      //       duration: 1000
      //     });
      //   }
      // }
      if (this.formInline.signintasknumber){
        this.getSku()
      } else {
        this.getInfo(this.formInline.sku)
      }
      //  else {
      //   return this.$message({
      //     showClose: true,
      //     message: "请输入任务单号",
      //     type: "warning",
      //     duration: 1000
      //   });
      // }
    },
    //通过任务号获取sku
    initSku(){
      this.signquantity = null
      this.saveItem = null
      this
        .$axios({
          method:'get',
          url:`/qc/tasknumber?signintasknumber=${this.formInline.signintasknumber}`
        })
        .then(({ data }) => {
          this.formInline.sku = data.productspeccode
          this.saveItem = data
          this.getInfo(this.formInline.sku)
        })
    },
    getSku(){
      let that = this
      that.signquantity = null
      that.saveItem = null
      that
        .$axios({
          method:'get',
          url:`/qc/tasknumber?signintasknumber=${that.formInline.signintasknumber}`
        })
        .then(({ data }) => {
          that.formInline.sku = data.productspeccode
          for (let i = 0; i < that.list.length; i++){
            if (that.list[i].productspeccode === that.formInline.sku){
              return that.$message({
                showClose:true,
                message:that.$t('m.notice.exist'),
                type:'warning',
                duration:1000
              })
            }
          }
          that.saveItem = data
          that.getInfo(that.formInline.sku)
        })
    },
    //通过sku获取详细信息
    getInfo(productspeccode){
      let that = this
      that
        .$axios({
          method:'get',
          url:`/productinfo/sku?sku=${productspeccode}`
        })
        .then(({ data }) => {
          if (that.formInline.signintasknumber){
            that.saveItem.fullspecvlue = data.productSkuList[0].fullspecvlue
            that.list.push(that.saveItem)
          } else {
            for (let i = 0; i < that.list.length; i++){
              if (that.list[i].productspeccode == that.formInline.sku){
                return that.$message({
                  showClose:true,
                  message:that.$t('m.notice.exist'),
                  type:'warning',
                  duration:1000
                })
              }
            }
            if (that.formInline.sku){
              that.list.push({
                fullspecvlue:data.productSkuList[0].fullspecvlue,
                signquantity:null,
                productspeccode:productspeccode
              })
            }
          }
          that.status_loading = false
        })
    },
    reduce(index){
      this.list.splice(index, 1)
    },
    clearNumber(){
      this.formInline.signintasknumber = ''
      this.signquantity = null
      this.formInline.sku = this.formInline.sku.replace(/\s+/g, '')
    },

    barcode(){
      for (let i = 0; i < this.list.length; i++){
        JsBarcode('#code' + i, this.list[i].productspeccode, {
          format:'CODE128', //选择要使用的条形码类型
          text:this.list[i].productspeccode, //显示文本
          displayValue:true, //是否在条形码下方显示文字
          textPosition:'bottom', //设置文本的垂直位置
          background:'#fff', //设置条形码的背景
          font:'微软雅黑', //设置文本的字体
          margin:5 //设置条形码周围的空白边距
        })
      }
    },
    printInit(){
      let LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, '')
      LODOP.PRINT_INIT('打印SKU')
      // let strStyle =
      //   '<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse;padding:5px;}</style>'
      // let tableStyle = '<style> table,td,th {padding:5px;}</style>'
      LODOP.ADD_PRINT_HTM(
        100,
        '3%',
        '94%',
        910,
        document.getElementById('div1').innerHTML
      )
      LODOP.NewPageA()
      LODOP.ADD_PRINT_HTM(
        10,
        650,
        200,
        100,
        '<font color=\'#0000ff\' format=\'Num\'><span tdata=\'pageNO\'>' +
          'NO.##'+'</span>/<span tdata=\'pageCount\'>'+' Total : ##'+'</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
    },
    printSku(){
      let that = this
      let arr = []
      that.list.forEach(v => {
        for (let i = 0; i < v.signquantity; i++){
          arr.push({
            fullspecvlue:v.fullspecvlue,
            number:v.signquantity,
            sku:v.productspeccode
          })
        }
      })
      that
        .$axios({
          method:'post',
          url:'/printtemplate/printsku',
          data:arr
        })
        .then(({ data }) => {
          that.printContent = data
          that.printContent +=
            'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
          eval(that.printContent)
        })
    },
    printDialog(){
      let that = this
      that.dialogFormVisible = true
      setTimeout(() => {
        that.barcode()
      }, 0)
    },
    PreviewMytable(){
      setTimeout(() => {
        //this.barcode();
        this.printSku()
      }, 0)

      // LODOP.PRINT(); 直接打印
      //LODOP.PRINTA(); 选择打印机打印
    }
  },

  activated(){
    this.formInline.signintasknumber = this.$route.query.signintasknumber
    if (this.formInline.signintasknumber){
      this.initSku()
    } else {
      this.status_loading = false
    }
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    next()
  }
}
</script>
<style lang='scss' scoped>
.container {
  width: 1000px;
}
.el-table {
  overflow-y: scroll;
}
.print-block {
  opacity: 0;
  height: 0;
  overflow: hidden;
}
</style>